<template>
  <div class="type-component" style="width: 172px" v-show="condition !== 'empty' && condition !== 'nempty'">
    <template v-if="type === 'string' || type === 'number'">
      <el-input v-model="value1" @input="inputChange" :type="type || getInputType" placeholder="请输入"></el-input>
      <el-input
        v-model.trim="value2"
        @input="inputChange"
        :type="getInputType(type)"
        placeholder="请输入"
        v-if="condition === 'between' || condition === 'nbtn'"
      ></el-input>
    </template>
    <template v-if="type === 'date'">
      <el-date-picker
        v-model="value1"
        :type="getDateType(condition)"
        @change="inputChange"
        value-format="YYYY-MM-DD HH:mm:ss"
        placeholder="选择日期时间"
        @focus="onFocus"
        @blur="onBlur"
        style="width: 172px"
      >
      </el-date-picker>
      <el-date-picker
        v-model="value2"
        :type="getDateType(condition)"
        @change="inputChange"
        @focus="onFocus"
        @blur="onBlur"
        value-format="YYYY-MM-DD HH:mm:ss"
        placeholder="选择日期时间"
        v-if="condition === 'between' || condition === 'nbtn'"
        style="width: 172px"
      >
      </el-date-picker>
    </template>
    <template v-if="type === 'select'">
      <!-- :key="isMultiple" 用于处理单选切换双选文字不清空 -->
      <el-select
        v-model="value1"
        :placeholder="'请选择'"
        filterable
        :multiple="isMultiple"
        :value-key="props.value ? props.value : '_id'"
        :key="isMultiple"
        collapse-tags
        collapse-tags-tooltip
        @change="inputChange"
      >
        <el-option
          v-for="(item, index) in selectList"
          :key="index"
          :label="item[props.label]"
          :value="item[props.value]"
        >
        </el-option>
      </el-select>
    </template>
    <template v-if="type === 'cascader'">
      <el-cascader
        v-model="value1"
        :options="selectList"
        :props="caProps"
        clearable
        filterable
        collapse-tags
        @change="inputChange"
      ></el-cascader>
    </template>
    <template v-if="!type">
      <el-input disabled placeholder="请输入"></el-input>
    </template>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, watch, toRefs, computed } from 'vue-demi'
import { ElMessage } from 'element-plus'
export default defineComponent({
  name: 'TypeComponent',
  props: {
    type: {
      type: String,
      default: ''
    },
    condition: {
      type: String,
      default: ''
    },
    modelValue: {
      type: Array,
      default: () => []
    },
    props: {
      type: Object,
      default: () => ({})
    },
    selectList: {
      type: Array,
      default: () => []
    },
    allowCreate: {
      type: Boolean,
      default: false
    },
    allowCreateLength: {
      type: Number,
      Default: 0
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const state: any = reactive({
      value1: '' || [],
      value2: '',
      isFocus: false, // 解决日期插件消失
      isMultiple: false
    })

    const caProps = computed(() => {
      return {
        checkStrictly: true,
        multiple: props.props.multiple ? props.props.multiple : false,
        children: props.props.children ? props.props.children : 'options',
        emitPath: props.props.emitPath ? false : true,
        label: props.props.label ? props.props.label : 'name',
        value: props.props.value ? props.props.value : 'name'
      }
    })

    const inputChange = () => {
      if (props.allowCreate && props.allowCreateLength) {
        if (state.value1.length > props.allowCreateLength) {
          ElMessage.error(`最多允许创建${props.allowCreateLength}条`)
          state.value1.pop()
          return
        }
      }
      emit('update:modelValue', [state.value1, state.value2])
    }

    const onFocus = () => {
      state.isFocus = true
    }

    const onBlur = () => {
      state.isFocus = false
      inputChange()
    }

    const getInputType = (type: string) => {
      if (type === 'number') {
        return 'number'
      } else {
        return 'text'
      }
    }

    const getDateType = (con: string) => {
      if (con === 'eq') {
        return 'date'
      } else if (con === 'ne') {
        return 'date'
      } else {
        return 'datetime'
      }
    }

    watch(
      () => props.modelValue,
      (newVal) => {
        if (props.type === 'select' && (props.condition === 'in' || props.condition === 'nin')) {
          state.isMultiple = true
        } else {
          state.isMultiple = false
        }
        if (!newVal || newVal.length === 0) {
          if (props.type === 'select' && (props.condition === 'in' || props.condition === 'nin')) {
            state.value1 = []
          } else {
            state.value1 = ''
            state.value2 = ''
          }
        } else {
          newVal.forEach((item, index) => {
            const key = 'value' + (index + 1)
            state[key] = item
          })
        }
      },
      { immediate: true, deep: true }
    )

    return {
      caProps,
      inputChange,
      onFocus,
      onBlur,
      getInputType,
      getDateType,
      ...toRefs(state)
    }
  }
})
</script>

<style lang="stylus" scoped>
.type-component
  :deep(.el-date-editor)
    width 180px
</style>
